<template>
	<view class="scale-container" @click=goBluetooth>
		<view class="scale-status" :class="statusClass">
			{{ statusText }}
		</view>
		<view class="scale-name">
			{{ deviceName }}
		</view>
		<view class="scale-weight">
			{{ formattedWeight }}<text class="weight-unit">kg</text>
		</view>
		<view class="scale-battery" v-if="showBattery">
			<text class="battery-icon">🔋</text>
			<text class="battery-level">{{ batteryLevel }}%</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BluetoothScale",
		computed: {
			deviceName() {
				return this.$store.state.weight.deviceName;
			},
			status() {
				return this.$store.state.weight.status;
			},
			weight() {
				return this.$store.state.weight.weight;
			},
			batteryLevel() {
				return this.$store.state.weight.batteryLevel;
			},
			// 格式化重量显示
			formattedWeight() {
				console.log(this.weight,"this.weight");
				return this.weight
			},
			// 是否显示电池电量
			showBattery() {
				return false
			},
			statusText() {
				const statusMap = {
					disconnected: '未连接',
					connecting: '连接中...',
					connected: '已连接',
					error: '连接错误'
				};
				return statusMap[this.status] || '未知状态';
			},
			statusClass() {
				return `status-${this.status}`;
			}
		},
		methods: {
			goBluetooth() {
				this.$tab.navigateTo(`/pages/bluetooth/index`);
			},
			zeroReset() {
				this.$store.dispatch('weight/zeroReset');
			},
			tare() {
				this.$store.dispatch('weight/tare');
			}
		}
	};
</script>

<style scoped>
	.scale-container {
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		background-color: #ffffff;
		gap: 20rpx;
	}

	.scale-status {
		font-size: 24rpx;
		font-weight: 500;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		white-space: nowrap;
	}

	.status-disconnected {
		background-color: #f5f5f5;
		color: #999999;
	}

	.status-connecting {
		background-color: #fff9e6;
		color: #e6a700;
	}

	.status-connected {
		background-color: #f0f9f0;
		color: #52c41a;
	}

	.status-error {
		background-color: #fff2f0;
		color: #ff4d4f;
	}

	.scale-name {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.scale-weight {
		font-size: 36rpx;
		font-weight: 600;
		color: #1890ff;
		white-space: nowrap;
		margin-left: auto;
	}

	.weight-unit {
		font-size: 24rpx;
		color: #666666;
		margin-left: 4rpx;
		font-weight: 400;
	}

	.scale-battery {
		display: flex;
		align-items: center;
		gap: 6rpx;
		font-size: 22rpx;
		color: #666666;
		white-space: nowrap;
	}

	.battery-icon {
		font-size: 20rpx;
	}

	.battery-level {
		font-weight: 400;
	}

	/* 响应式设计 */
	@media (max-width: 375px) {
		.scale-container {
			padding: 16rpx 20rpx;
			margin: 16rpx;
			gap: 16rpx;
		}

		.scale-weight {
			font-size: 32rpx;
		}

		.scale-status {
			font-size: 22rpx;
			padding: 6rpx 12rpx;
		}

		.scale-name {
			font-size: 26rpx;
		}
	}
</style>